<template>
	<view class="nav" :style="{ height: statusBarHeight + 'px' }">
		<view class="nav-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		<view class="nav-content" :style="[navbarInnerStyle]">
			<view class="nav-icon">
				<u-icon class="fanhui" name="arrow-left" color="#333" size="40" @tap="triggerToBack"></u-icon>
			</view>
			<view class="nav-title" :style="[titleStyle]">{{title}}</view>
			<view class="nav-operator"> </view>
		</view>
	</view>
</template>
<script>
	let systemInfo = uni.getSystemInfoSync();
	export default {
		name: "wallet-nav",
		data() {
			return {};
		},
		props: {
			title: {
				type: String,
				default: ''
			}
		},
		computed: {
			statusBarHeight() {
				return systemInfo.statusBarHeight;
			},
			// 导航栏内部盒子的样式
			navbarInnerStyle() {
				let style = {};
				// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
				style.height = this.navbarHeight + "px";
				// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
				// #ifdef MP
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.marginRight = rightButtonWidth + "px";
				// #endif
				return style;
			},
			// 导航中间的标题的样式
			titleStyle() {
				let style = {};
				// #ifndef MP
				style.left = (systemInfo.windowWidth - uni.upx2px(250)) / 2 + "px";
				style.right = (systemInfo.windowWidth - uni.upx2px(250)) / 2 + "px";
				// #endif
				// #ifdef MP
				// 此处是为了让标题显示区域即使在小程序有右侧胶囊的情况下也能处于屏幕的中间，是通过绝对定位实现的
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.left = (systemInfo.windowWidth - uni.upx2px(250)) / 2 + "px";
				style.right =
					rightButtonWidth -
					(systemInfo.windowWidth - uni.upx2px(250)) / 2 +
					rightButtonWidth +
					"px";
				// #endif
				style.width = uni.upx2px(250) + "px";
				return style;
			},
			// 转换字符数值为真正的数值
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return this.height ? this.height : 44;
				// #endif
				// #ifdef MP
				// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
				// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
				// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
				let height = systemInfo.platform == "ios" ? 44 : 48;
				return this.height ? this.height : height;
				// #endif
			},
		},
		onShow() {},
		watch: {},
		methods: {
			triggerToBack() {
				const pages = getCurrentPages();
				if (pages.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.redirectTo({
						url: '/pages/sys/home/index'
					})
				}
			},

		},
	};
</script>
<style lang="scss">
	.nav {
		.fanhui {
			/deep/.uicon-arrow-left {
				color: #fff !important;
			}
		}

		&-icon {
			display: flex;
			width: 84rpx;
			flex: 0 0 84rpx;
			align-items: center;
			justify-content: center;
		}

		&-operator {
			display: flex;
			width: 84rpx;
			flex: 0 0 84rpx;
			align-items: center;
			justify-content: center;
		}

		&-content {
			display: flex;
			justify-content: space-between;
		}

		&-title {
			text-align: center;
			line-height: 60rpx;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 600;
			color: #ffffff;
			line-height: 36rpx;
		}
	}
</style>
